<div class="drag_chart_comp">
    <p class="chart_title">网络资源使用率</p>
    <div id="chartC" class="chart_item"></div>
</div>
<script>
const bc3 = new BroadcastChannel('center');

bc3.onmessage = function (e) {
  clearInterval(intervalC)
  loadChartC((e.data + 1) * 1000)
}

var intervalC = null

function loadChartC(timeout) {
  var now = new Date();

  function randomData() {
    now = new Date(now.getTime() + 1000);
    let value = Math.random() * 30
    return [
      now,
      Math.round(value + 50)
    ]
  }

  var data = [];
  for (var i = 0; i < 50; i++) {
    let a = randomData()
    data.push(a);
  }
  var options = {
    legend: {
      y: 30,
      textStyle: {
        fontSize: 14,
        color: '#fff'
      },
      data: ['网络资源使用率']
    },
    grid: {
      x2: 40,
      borderColor: 'transparent',
    },
    xAxis: [
      {
        type: 'time',
        splitNumber: 4,
        axisLabel: {
          textStyle: {
            color: '#fff',
            fontSize: 14
          }
        },
        splitLine: {
          lineStyle: {
            color: '#306192'
          }
        },
        splitArea: {
          show: false,
        }
      }
    ],
    yAxis: {
      type: 'value',
      max: 100,
      min: 0,
      axisLabel: {
        formatter: '{value} %',
        margin: 18,
        textStyle: {
          color: '#fff',
          fontSize: 14
        }
      },
      splitLine: {
        show: false
      }
    },
    series: [
      {
        name: '网络资源使用率',
        type: 'line',
        itemStyle: {
          normal: {
            areaStyle: {
              color: '#b3e2fa',
              type: 'default'
            }
          }
        },
        data: data
      }
    ],
    animation: false
  };

  var chartC

  function loadChart() {
    chartC = echarts.init(document.getElementById('chartC'), 'macarons')
    setChart()
    intervalC = setInterval(function () {
      setChart()
    }, timeout);
  }

  function setChart() {
    chartC.setOption(options)
    var _data = randomData();
    data.shift();
    data.push(_data);
    chartC.setOption({
      series: [{
        data: data
      }]
    });
  }

  loadChart()
}

loadChartC(1000)
</script>
